<template>
  <div class="center-wrapper">
    <!-- 地铁线路 -->
    <div id="subLine-controller">
      <div class="title-bg"><i class="iconfont icon-luxuan"></i> 地铁线路</div>
      <div class="item-wrapper">
        <div class="item" v-for="item in subLineData" @click.stop="handleItemClick(item)">
          <div class="box" :style="{ borderColor: item.color, backgroundColor: item.color }"></div>
          <span :style="{ color: '#34c5cf' }">{{ item.name.slice(-3) }}</span>
        </div>
      </div>
    </div>
    <!-- 重点活动 -->
    <div class="active-panel">
        <div class="header">
          <strong>重点活动</strong>
          <span>{{ date }}</span>
        </div>
        <div class="content">
          <div class="active-wrapper" v-if="activityData.length">
            <div v-for="item in activityData" :class="['acitve-item', item.isActive ? 'item-active' : '']" @click="clickActiveItem(item)">
              <div>{{ item.activedTime }}</div>
              <div>{{ item.activedPlace }}</div>
              <div>{{ item.activity }}</div>
            </div>
          </div>
          <a-empty v-else :image="simpleImage" description="无数据" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { getLine } from '@/api/line.js';
import { useLineData } from '@/store/index.js';

// 引入活动数据
import { activity } from '@/store/staticData';

// 引入跳转, 闪烁等方法
import { flyToLine, binkLineByName, flyToCone, addGradientCone, removeAllCones } from '@/cesiumTools/controller/effectController';

const lineData = useLineData();
const viewer = lineData.Viewer;

// 定义地铁线路数据
const subLineData = ref([]);
const currentStations = ref([]);

// 定义重点活动
const activityData = ref([])

const date = ref(new Date().toLocaleDateString());

// 点击线路，跳转到质心点并高亮该线段,展示重点活动，使用电子围墙的材质
const handleItemClick = (item) => {
  console.log(item)
  const { name, stationsList, color } = item
  flyToLine(viewer, name)
  binkLineByName(name)
  currentStations.value = stationsList
  activityData.value = activity
  
  showActiveArea(color)
}

const clickActiveItem = (item) => {
  const { id } = item
  console.log(item)
  flyToCone(viewer, id)
}

const showActiveArea=(color)=>{
  removeAllCones(viewer)
  const ids = activityData.value.map(item => item.id)
  // 这里坐标直接取index和id对应的站点坐标
  const activedStations = currentStations.value.map((item,index) => {
    item.id = index
    return item
  }).filter(item=>ids.includes(item.id))
  activedStations.forEach(item=>{
    const { position, id }= item
    // 添加渐变圆柱
    addGradientCone(viewer,{
      position,
      color,
      name: id
    })
  })
}

onMounted(async () => {
  // 请求地铁线路数据
  const data = await getLine();
  console.log(data)

  // 地铁线路数据
  subLineData.value = data.map(item => {
    // 生成三个0到255之间的随机整数，分别代表RGB值
    let r = Math.floor(Math.random() * 256);
    let g = Math.floor(Math.random() * 256);
    let b = Math.floor(Math.random() * 256);
    return { ...item, color: `rgb(${r}, ${g}, ${b})` };
  });

  activityData.value = activity
});

onBeforeUnmount(() => {
  removeAllCones(viewer)
})

</script>

<style scoped lang="scss">
@import url('http://at.alicdn.com/t/c/font_4778950_lp9z1s241oi.css');

.center-wrapper {
  display: flex;
  gap: 10px;
  position: absolute;
  bottom: 90px;
  left: 29%;
  width: 800px;
  height: 280px;
  z-index: 1020;

  /* 地铁线路列表 */
  #subLine-controller {
    width: 180px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #ab7818;
    display: flex;
    flex-direction: column;

    .title-bg {
      line-height: 30px;
      margin-left: 10px;
      background: rgb(255, 255, 255);
      background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 9%, rgba(211, 156, 50, 1) 57%);
      background-clip: text; //保证-webkit-background-clip不会提示错误
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  /* 重点活动 */
  .active-panel {
    border: 1px solid #ab7818;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .header {
      height: 30px;
      padding: 4px;
      background: rgb(255, 255, 255);
      background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 9%, rgba(211, 156, 50, 1) 57%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: -0.521vw;
      font-family: "等线Bold";

      strong {
        font-weight: normal;
        margin-right: 10px;
      }

      span {
        font-size: 12px;
      }
    }

    .content {
      flex: 1;

      .active-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px;
        gap: 5px;
        height: 100%;

        .acitve-item {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          width: 150px;
          height: 70px;
          border: 1px solid #ab7818;
          background-color: rgba(214, 174, 41, 0.1);
          text-align: center;
          pointer-events: all;
          cursor: pointer;
          transition: all 0.3s linear;
          color: #37b3bb;
          font-size: 16px;

          &:hover {
            background-color: rgba(214, 174, 41, 0.3);
            color: #fff;
          }
        }

        .item-active {
          background-color: rgba(214, 174, 41, 0.3);
          color: #fff;
        }
      }
    }
  }

  .item-wrapper {
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    flex: 1;
    padding: 12px 4px;
    overflow: hidden;

    .item {
      width: 70px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      background-color: rgba(255, 255, 255, 0.2);
      border: 1px solid #885f12;
      color: #fff;
      font-size: 0.8vw;
      pointer-events: all;

      &:hover {
        border: 1px solid #d8961a;
        cursor: default;
      }

      span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 42px;
      }

      .box {
        width: 10px;
        height: 10px;
        border-width: 1px;
        border-style: solid;
        background: transparent;
        user-select: all;
        cursor: pointer;
        transition: all 0.3s linear;
        z-index: 1040;
      }
    }
  }
}
</style>
